<template>
  <view :style="{
          'background-color':diyPageInfo.home.bgColor,
          'background-image':'url('+diyPageInfo.home.bgImg+')',
        }">
    <StatusNav :properties="statusNavProperties"/>
    <view class="page-index">


      <view v-if="diyPageInfo.component!==undefined && diyPageInfo.component.length" v-for="component in diyPageInfo.component">

        <!-- 图片轮播-->
        <ImgSwiper :properties="component"
                   v-if="component.component === 'pictureads'"/>

        <!-- 公告-->
        <Notice :properties="component" v-if="component.component === 'notice'"/>

        <!-- 图文导航-->
        <ImgTextNav :properties="component"
                    v-if="component.component === 'graphicnavigation'"/>

        <!-- 辅助分割-->
        <SplitLine :properties="component" v-if="component.component === 'auxiliarysegmentation'"/>

        <!--   拼团-->
        <SchoolGroup :properties="component" :datas="groupInfos" v-if="component.component === 'schoolGroup' && groupInfos.length>0"/>

        <!--  订单-->
        <NewOrder :properties="component" v-if="component.component === 'indexOrder'" :datas="orderData"/>
        <IndexUser :userInfo="userInfo" :isLogin="isLogin" :properties="component" v-if="component.component === 'indexUser'"/>

        <List :properties="component" v-if="component.component === 'entertheshop'"></List>

        <NewProduct  :properties="component"   v-if="component.component === 'ershouproduct'" :datas="productDatas"/>

        <Follow  :properties="component"   v-if="component.component === 'follow'"/>

        <Video :properties="component" v-if="component.component === 'videoss'"></Video>
      </view>



    </view>
    <Tabar :app="getApp()" :activeIndex="0" ref="tabbar"/>
  </view>
</template>
<script>

import ImgThird from '@/components/school/imgThird';
import Follow from '@/components/school/follow/index';
import {mapGetters} from "vuex";
import Notice from '@/components/school/notice';
import ImgTextNav from '@/components/school/imgTextNav';
import ImgSwiper from '@/components/school/imgSwiper';
import SplitLine from '@/components/school/splitLine';
import SchoolGroup from '@/components/school/group';
import RichText from '@/components/school/richtext';
import Tabar from '@/components/school/tabbar';
import Video from '@/components/school/video';
import List from '@/components/school/list';
import OrderList from '@/components/school/orderList';
import NewOrder from '@/components/school/newOrder';
import NewProduct from '@/components/school/newProduct';
import IndexUser from '@/components/school/indexUser';
import StatusNav from '@/components/school/statusNav';
import * as OrderApi from '@/api/school/order.js';
import * as GrpoupApi from '@/api/school/groupinfo.js';
import * as ProductApi from '@/api/school/product.js';
import * as DiyPageUtil from '@/api/promotion/diyPage.js';
import diyJson from '@/config/diy.js';

import {getTerminal} from "@/utils/util";

let app = getApp();

export default {
  computed: mapGetters(['uid', 'schoolId']),
  components: {
    NewOrder,
    NewProduct,
    StatusNav,
    Notice,
    Follow,
    SplitLine,
    ImgTextNav,
    SchoolGroup,
    RichText,
    Tabar,
    IndexUser,
    Video,
    List,
    OrderList,
    ImgSwiper,
    ImgThird,
  },
  data() {
    return {
      statusNavProperties: { // 筛选条件
        title: "天天帮你跑",
        showLeft:  false,
        showHome:  false ,
        setStyle: diyJson.statusbar.setStyle
      },
      themConfig: app.globalData.themConfig,
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      diyPageInfo: {},
      navIndex: 0,
      navTop: [],
      marTop: 0,
      configApi: {}, // 分享类容配置
      tabsScrollLeft: 0, // tabs 当前偏移量
      scrollLeft: 0,

      menus: [], // 菜单
      scrollingNews: [], // 新闻简报
      indicatorDots: false,
      autoplay: true,
      couponList: [], // 优惠劵列表
      productRecommends: [], // 商品推荐

      site_name: '首页', // 首页 title
      logoUrl: "",

      params: { //精品推荐分页
        page: 1,
        limit: 10,
      },
      loading: false,
      tempArr: [], // 精品推荐临时数组
      iSshowH: false,

      pageBody: {
        background: '',
        paddingBottom: app.globalData.windows.tabbarH,
      },

      // 订单列表
      orderData: [],
      groupInfos: [],
      productDatas: [],
      dataPage: {
        current: 1,
        pages: 1,
        size: 1,
        total: 0,
      },
      userInfo:undefined,
      isLogin: false
    }
  },
  watch: {
    listActive(newVal) { // 监听当前选中项
      this.setTabList();
    }
  },
  mounted() {
    this.setTabList();
  },
  onPullDownRefresh() {
    this.dataList();
    uni.stopPullDownRefresh();
  },
  onShow() {

    this.userInfo = this.$store.getters.userInfo;
    this.isLogin = this.$store.getters.isLogin;

    this.getDiyPageData(false);
    uni.setNavigationBarTitle({
      title: this.site_name
    });
    this.dataList();
    this.getGroupNewest();
  },
  onLoad() {
    this.getDiyPageData(true);
    this.productList();
    var that = this;
    // 获取系统信息
    uni.getSystemInfo({
      success(res) {
        that.$store.commit("SYSTEM_PLATFORM", res.platform);
      }
    });
  },
  methods: {

    // 订单数据
    dataList() {
      OrderApi.indexLimit({size: 2, schoolId: this.schoolId}).then(res => {
        this.orderData = res.data;
      })
    },

    // 获取跑腿拼团信息
    getGroupNewest() {
      GrpoupApi.getGroupNewest(this.schoolId).then(res => {
        this.groupInfos = res.data;
      })
    },

    // 二手商品信息
    productList() {
      ProductApi.getNewList({size: 5, schoolId: this.schoolId}).then(res => {
        this.productDatas = res.data;
      })
    },

    // 接单成功后调用
    acctOrder(params) {
      this.orderData.splice(0, 1);
      this.dataList();
    },

    getApp() {
      return app;
    },

    scroll: function (e) {
      console.log(e)
      this.old.scrollTop = e.detail.scrollTop
    },

    // 装修组建
    getDiyPageData(getNewest) {
      let diyPage = uni.getStorageSync("diyPageInfo");
      if (getNewest || !diyPage) {
        let terminal = getTerminal();
        DiyPageUtil.getDecorationInfo({clientType: terminal === 'MP' ? 'H5' : terminal, schoolId: this.schoolId, pageType: 'INDEX'}).then(
            res => {
              let pageData = res.data;
              if (pageData) {
                diyPage = {
                  component: pageData.content.component,
                  home: pageData.content.pageSetup,
                  name: '首页'
                }
              } else {
                diyPage = {
                  component: []
                }
              }
              this.$set(this, "diyPageInfo", diyPage);
              uni.setStorageSync("diyPageInfo", JSON.stringify(diyPage));
            });
      } else {
        if (!this.diyPageInfo.component) {
          this.$set(this, "diyPageInfo", JSON.parse(diyPage));
          console.log("diyPage", this.diyPageInfo);
        }
      }
    },

    setTabList() {
      this.$nextTick(() => {
        // this.scrollIntoView()
      })
    },
    initPageBodyProperties() {

    },
  },

  /**
   * 用户点击右上角分享
   */
  // #ifdef MP
  onShareAppMessage: function () {
    return {
      title: this.configApi.title,
      imageUrl: this.configApi.img,
      desc: this.configApi.synopsis,
      path: '/pages/index/index'
    };
  },
  // #endif
  onReachBottom() {

  }
}
</script>

<style >
page {
  display: flex;
  flex-direction: column;
}
view{border:none !important;}
</style>
<style lang="scss">
@import 'css/index';

</style>
